<!DOCTYPE html>
<html lang="en">

<head th:include="include/fore/header::html" ></head>

<body>
<script>
    function pageIndex() {
        window.location.assign('home');
    }
    function pageGen() {
        window.location.assign('gen');
    }
    function pageApi() {
        window.location.assign('api');
    }
    function pageSquare() {
        window.location.assign('square');
    }
</script>
    <!--------------------------------------NAVBAR--------------------------------------->
    <nav class="topnav navbar navbar-expand-lg navbar-light bg-white fixed-top">
        <div class="container">
            <a class="navbar-brand" onclick="pageIndex()"><strong>Superlattice DataBase</strong></a>
            <div class="navbar-collapse collapse" id="navbarColor02" style="">
                <ul class="navbar-nav mr-auto d-flex align-items-center">
                    <li class="nav-item">
                        <a class="nav-link" onclick="pageGen()" > Generate Structure <span
                                class="sr-only">(current)</span> </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" onclick="pageApi()">REST API Docs</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" onclick="pageSquare()">Data Square</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- End Navbar -->


    <!--------------------------------------HEADER--------------------------------------->
<div class="container">
    <div class="jumbotron jumbotron-fluid mb-3 pl-0 pt-0 pb-0 bg-white position-relative">
        <div class="h-100 tofront">
            <div class="row justify-content-between">
                <!-- <div class="col-md-3 pt-6 pb-6 pr-6 align-self-center">
                    <ul class="nav-api">
                        <li role="presentation" class="active"><a href="#">Home</a></li>
                        <li role="presentation"><a href="#">Profile</a></li>
                        <li role="presentation"><a href="#">Messages</a></li>
                    </ul>
                </div> -->

                <div class="col-md-4 pt-6 pb-6 pr-6 align-self-start list-group">
                    <a href="#query" class="list-group-item">数据广场搜索数据API</a>
                    <a href="#download" class="list-group-item">
                        文件下载API
                    </a>
                    <a href="#add" class="list-group-item">上传数据</a>
                    <a href="#get" class="list-group-item">获取数据</a>
                </div>


                <div class="col-md-8 pr-0">
                    <span id="query"></span>
                    <br>
                    <br>
                    <h3>数据广场搜索数据API</h3>
                    <br>
                    <h5>接口描述</h5>
                    <p>Data Square搜索数据并返回结果列表</p>
                    <br>
                    <h5>接口使用说明</h5>
                    <p>HTTP方法：POST</p>
                    <p>请求URL：http://localhost:8080/gjw/queryData</p>
                    <p>Header如下：</p>
                    <table class="table table-striped table-bordered table-hover  table-condensed">
                        <tr>
                            <th>参数</th>
                            <th>值</th>
                        </tr>
                        <tr>
                            <td>Content-Type</td>
                            <td>application/json; charset=utf-8</td>
                        </tr>
                    </table>
                    <br>

                    <p>Body请求参数:</p>
                    <table class="table table-striped table-bordered table-hover  table-condensed">
                        <tr>
                            <th>参数</th>
                            <th>类型</th>
                            <th>是否必须</th>
                            <th>说明</th>
                        </tr>
                        <tr>
                            <td>body</td>
                            <td>array[{"key":String}]</td>
                            <td>是</td>
                            <td>搜索条件集合</td>
                        </tr>
                    </table>
                    <br>

                    <p>请求Body示例：</p>
                    <div style="width: 40%;background-color: rgb(193, 191, 191);">
                        [{"attribute": "id_0",
                        "value": "1000",
                        "flag": false}]
                    </div>
                    <br>

                    <h5>返回说明</h5>
                    <p>返回参数：</p>
                    <table class="table table-striped table-bordered table-hover  table-condensed">
                        <tr>
                            <th>字段</th>
                            <th>类型</th>
                            <th>是否必须</th>
                            <th>说明</th>
                        </tr>
                        <tr>
                            <td>ids</td>
                            <td>array[integer]</td>
                            <td>是</td>
                            <td>文件id编号</td>
                        </tr>
                    </table>
                    <br>

                    <p>成功响应示例：HTTP状态码 = 200 </p>
                    <p>失败响应示例：</p>
<!--                    ==================================================-->
                    <span id="download"></span>
                    <br>
                    <br>
                    <h3>文件下载API</h3>
                    <br>
                    <h5>接口描述</h5>
                    <p>根据搜索数据选择所需文件并下载数据。</p>
                    <br>
                    <h5>接口使用说明</h5>
                    <p>HTTP方法：POST</p>
                    <p>请求URL：http://localhost:8080/gjw/download</p>
                    <p>Header如下：</p>
                    <table class="table table-striped table-bordered table-hover  table-condensed">
                        <tr>
                            <th>参数</th>
                            <th>值</th>
                        </tr>
                        <tr>
                            <td>Content-Type</td>
                            <td>application/json; charset=utf-8</td>
                        </tr>
                    </table>
                    <br>

                    <p>Body请求参数:</p>
                    <table class="table table-striped table-bordered table-hover  table-condensed">
                        <tr>
                            <th>参数</th>
                            <th>类型</th>
                            <th>是否必须</th>
                            <th>说明</th>
                        </tr>
                        <tr>
                            <td>ids</td>
                            <td>array[integer]</td>
                            <td>是</td>
                            <td>文件id编号</td>
                        </tr>
                    </table>
                    <br>

                    <p>请求Body示例：</p>
                    <div style="width: 40%;background-color: rgb(193, 191, 191);">
                        [0, 1]
                    </div>
                    <br>

                    <h5>返回说明</h5>
                    <p>返回参数：</p>
                    <table class="table table-striped table-bordered table-hover  table-condensed">
                        <tr>
                            <th>字段</th>
                            <th>类型</th>
                            <th>是否必须</th>
                            <th>说明</th>
                        </tr>
                        <tr>
                            <td>ids</td>
                            <td>array[integer]</td>
                            <td>是</td>
                            <td>文件id编号</td>
                        </tr>
                    </table>
                    <br>

                    <p>成功响应示例：弹出下载页面</p>

                    <p>失败响应示例：文件 :1.txt 不存在,请联系管理员!</p>

                    <span id="add"></span>
                    <br>
                    <br>
                    <h3>数据上传API</h3>
                    <br>
                    <h5>接口描述</h5>
                    <p>用户上传数据至临时表。</p>
                    <br>
                    <h5>接口使用说明</h5>
                    <p>HTTP方法：POST</p>
                    <p>请求URL：http://localhost:8080/gjw/add_products</p>
                    <p>Header如下：</p>
                    <table class="table table-striped table-bordered table-hover  table-condensed">
                        <tr>
                            <th>参数</th>
                            <th>值</th>
                        </tr>
                        <tr>
                            <td>Content-Type</td>
                            <td>application/json; charset=utf-8</td>
                        </tr>
                    </table>
                    <br>

                    <p>Body请求参数:</p>
                    <table class="table table-striped table-bordered table-hover  table-condensed">
                        <tr>
                            <th>参数</th>
                            <th>类型</th>
                            <th>是否必须</th>
                            <th>说明</th>
                        </tr>
                        <tr>
                            <td>数据名称</td>
                            <td>String</td>
                            <td>否</td>
                            <td>数据名称</td>
                        </tr>
                        <tr>
                            <td>sizex</td>
                            <td>String</td>
                            <td>否</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>sizey</td>
                            <td>String</td>
                            <td>否</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>sizez</td>
                            <td>String</td>
                            <td>否</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>...</td>
                            <td>String</td>
                            <td>否</td>
                            <td></td>
                        </tr>
                    </table>
                    <br>

                    <p>请求Body示例：</p>
                    <div style="width: 40%;background-color: rgb(193, 191, 191);">
                        {
                        "id": 13,
                        "name": "test1",
                        "sizex": "1",
                        "sizey": "1",
                        "sizez": "1",
                        "nX": "1",
                        "nY": "",
                        "strainX": "",
                        "strainY": "1",
                        "elecX": "1",
                        "elecY": "1",
                        "elecZ": "",
                        "dataType": "",
                        "supplmentaryInfo": "undefined",
                        "doi": "undefined"
                        }
                    </div>
                    <br>

                    <h5>返回说明</h5>

                    <br>

                    <p>成功响应示例：页面刷新出现新增数据，数据库出现新增数据 status code=200</p>

                    <p>失败响应示例：上传失败</p>

                    <span id="get"></span>
                    <br>
                    <br>
                    <h3>获取数据</h3>
                    <br>
                    <h5>接口描述</h5>
                    <p>根据数据ID获取数据</p>
                    <br>
                    <h5>接口使用说明</h5>
                    <p>HTTP方法：GET</p>
                    <p>请求URL：http://localhost:8080/gjw/add_products</p>
                    <p>Header如下：</p>
                    <table class="table table-striped table-bordered table-hover  table-condensed">
                        <tr>
                            <th>参数</th>
                            <th>值</th>
                        </tr>
                        <tr>
                            <td>Content-Type</td>
                            <td>application/json; charset=utf-8</td>
                        </tr>
                    </table>
                    <br>

                    <p>Param请求参数:</p>
                    <table class="table table-striped table-bordered table-hover  table-condensed">
                        <tr>
                            <th>参数</th>
                            <th>类型</th>
                            <th>是否必须</th>
                            <th>说明</th>
                        </tr>

                        <tr>
                            <td>id</td>
                            <td>String</td>
                            <td>是</td>
                            <td>数据id</td>
                        </tr>
                    </table>
                    <br>

                    <p>请求Body示例：</p>
                    <div style="width: 40%;background-color: rgb(193, 191, 191);">
                        1
                    </div>
                    <br>

                    <h5>返回说明</h5>
                    <p>返回参数：</p>
                    <table class="table table-striped table-bordered table-hover  table-condensed">
                        <tr>
                            <th>参数</th>
                            <th>类型</th>
                            <th>是否必须</th>
                            <th>说明</th>
                        </tr>
                        <tr>
                            <td>数据id</td>
                            <td>String</td>
                            <td>是</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>数据名称</td>
                            <td>String</td>
                            <td>否</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>sizex</td>
                            <td>String</td>
                            <td>否</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>sizey</td>
                            <td>String</td>
                            <td>否</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>sizez</td>
                            <td>String</td>
                            <td>否</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>...</td>
                            <td>String</td>
                            <td>否</td>
                            <td></td>
                        </tr>
                    </table>

                    <br>

                    <p>成功响应示例：HTTP状态码=200；<BR>

                        "id": 0,
                        "name": "",
                        "sizex": "",
                        "sizey": "",
                        "sizez": "",
                        "nX": "",
                        "nY": "",
                        "strainX": "",
                        "strainY": "",
                        "elecX": "",
                        "elecY": "",
                        "elecZ": "",
                        "dataType": "",
                        "Doi": "",
                        "SupplmentaryInfo": ""
                        }</p>

                    <p>失败响应示例：获取失败</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="fixed_div" style="position: fixed; bottom: 50px; left: 40px;">
    <a href="#query">回到页面顶部</a>
</div>

    <!-- End Header -->


    <!--------------------------------------FOOTER--------------------------------------->
    <div class="container mt-5">
        <footer class="bg-white border-top p-3 text-muted big">
            <div class="row align-items-center justify-content-between">
                <div>
                    <span class="navbar-brand mr-2"><strong>SuperDB</strong></span> Copyright &copy;
                    <script>
                        document.write(new Date().getFullYear())
                    </script>
                    . All rights reserved.
                </div>
                <div>
                    Tex: xxxx E-mail: xxx
                </div>
            </div>
        </footer>
    </div>
    <!-- End Footer -->

</body>

</html>